.frend-message {
  display: flex;
  flex-direction: column;

  .title-bar {
    height: 40px;
    background-color: #f2f2f2;
    line-height: 40px;
    border-bottom: 1px solid #e9e9e9;

    .title {
      margin-left: 10px;
    }
  }

  .message-list {
    display: flex;
    // margin-top: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    flex-direction: column;

    .item {
      display: flex;
      padding: 10px;

      &--left {
        // justify-content: flex-start;
      }

      &--right {
        // justify-content: flex-end;
        flex-direction: row-reverse;
      }

      .avatar {
        margin-left: 10px;
        margin-right: 10px;
      }

      .msg {
        background-color: #0099ff;
        color: #ffffff;
        border-radius: 10px;
        padding: 10px;
        max-width: 300px;
      }
    }

    height: calc(100vh - 40px - 200px);
  }

  .message-send {
    border-top: 1px solid #e9e9e9;
    height: 200px;
    display: flex;
    flex-direction: column;

    .toolbar {
      height: 50px;
      background-color: #f5f2f2;
      display: flex;
      justify-content: space-between;
      padding: 5px;

      .btn {
        width: 40px;
        height: 40px;
      }

      &--left {
      }

      &--right {
        margin-right: 10px;
      }
    }

    .content {
      width: 100%;
      height: 100%;
      padding: 5px;
      overflow-y: auto;
      overflow-x: hidden;

      &:focus-visible {
        outline: none;
      }
    }

    .actionbar {
      margin-top: auto;
      margin-bottom: 10px;
      text-align: right;
      margin-right: 10px;
    }
  }
}
